<template>
  <el-upload
      class=""
      action=""
      :show-file-list="false"
      :http-request="fnUploadRequest"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
    <img v-if="imageUrl" :src="imageUrl" class="avatar" alt="">
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>

<script>
//首先第一行引入 ali-oss 插件并配置：
const OSS = require('ali-oss');
const client = new OSS({
  accessKeyId: 'LTAI5tHRPCxrsztbmL8vHfUz',  // 查看你自己的阿里云KEY
  accessKeySecret: '1xqKWffxF4vhQ7SQQhiLvdAzKPzpbw', // 查看自己的阿里云KEYSECRET
  bucket: 'open-innovation', // 你的 OSS bucket 名称
  region: 'oss-cn-beijing', // bucket 所在地址，我的是 华北2 北京
  // cname: true, // 开启自定义域名上传
  // endpoint: "oss-cn-beijing.aliyuncs.com" // 自己的域名
});

export default {
  name: "upload",
  data() {
    return {
      imageUrl: ''
    };
  },
  methods: {
    //图片上传成功回调
    handleAvatarSuccess(res) {
      if (res) this.imageUrl = res.url
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === 'image/jpeg';
      const isLt10M = file.size / 1024 / 1024 < 10;

      // if (!isJPG) {
      //   this.$message.error('上传头像图片只能是 JPG 格式!');
      // }
      if (!isLt10M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      // return isJPG && isLt2M;
      return isLt10M;
    },

    async fnUploadRequest(options) {
      try {
        let file = options.file; // 拿到 file
        let fileName = file.name.substr(0, file.name.lastIndexOf('.'))
        let date = new Date().getTime()
        let fileNames = `${date}_${fileName}` // 拼接文件名，保证唯一，这里使用时间戳+原文件名
        // 上传文件,这里是上传到OSS的 uploads文件夹下
        client.put("uploads/" + fileNames, file).then(res => {
          if (res.res.statusCode === 200) {
            options.onSuccess(res)
          } else {
            options.onError("上传失败")
          }
        })
      } catch (e) {
        options.onError("上传失败")
      }
    }
  }
}
</script>

<style scoped>

</style>